

<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:im聊天群详细
@author:成都市一颗优雅草科技有限公司     
@version V5.x 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   企业客服QQ:2853810243  官方客户·技术交流群 929353806交流群 929353806

 -->



<template>
	<view class="im-chat-group-info">

		<view class="bg-white">
			<view class="members uni-flex">
				<view class="row" v-for="(item,index) in membersArray" :key="index" @click="intoUserInfo(index)">
					<image class="avatar" :src="item.user.avatar" mode="aspectFit"></image>
					<view class="uni-center group-nickname uni-ellipsis uni-text-gray">{{item.memberType && item.memberType == "admin" ? "[管理员]": "" }} {{item.groupNickname?item.groupNickname:item.user.username}}</view>
				</view>

				<view class="row plus" @click="showDialog1">
					<image src="../../static/img/im/plus.png" mode="aspectFit"></image>
				</view>
				<view class="row plus" @click="showDialog2" v-if="loginProvider == owner">
					<image src="../../static/img/im/minus.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<view class="bg-white uni-common-mt">
			<view class="uni-row">
				<view class="tit">群号</view>
				<view class="info-text" style="padding-left: 20rpx;">{{groupId}}</view>
			</view>
			<view class="uni-row">
				<view class="tit">群聊名称</view>
				<view class="info-text">
					<input class="uni-input" v-model="name" />
				</view>
			</view>
			<view class="uni-row">
				<view class="tit">群聊描述</view>
				<view class="info-text desc">
					<textarea @blur="bindTextAreaBlur" auto-height v-model="desc" />
					</view>
			</view>
			<view class="uni-row">
				<view class="tit">消息免打扰</view>
				<view class="info-text">
					<switch :checked="ifNoDisturb" @change="switch1Change" />
				</view>
			</view>
			<view class="uni-row">
				<view class="tit">消息屏蔽</view>
				<view class="info-text">
					<switch :checked="ifblock" @change="switch2Change" />
				</view>
			</view>
		</view>
		
		<view class="uni-flex btns">
			<button type="primary" @click="update">更新群资料</button>
			<button type="warn" @click="quit">退出此群</button>
			<button type="warn" @click="dissolve" v-if="loginProvider == owner">解散群</button>
		</view>
		
		<uni-dialog title="添加成员" :show="show1" v-on:closeDialog="closeDialog1">
			<view slot="content">
				<view class="dialog-content1">
					<input class="uni-input" v-model="usernameArray" placeholder="输入成员用户名,多个以逗号隔开" />
				</view>
			</view>
			<view slot="btns">
				<view class="dialog-btns">
					<view><button type="primary" @tap="closeDialog1">关闭</button></view>
					<view><button type="primary" @tap="confirm1" formType="submit" style="color:#3688FF;">添加成员</button></view>
				</view>
			</view>
		</uni-dialog>
		
		<uni-dialog title="移除组内成员" :show="show2" v-on:closeDialog="closeDialog2">
			<view slot="content">
				<view class="dialog-content1">
					<input class="uni-input" v-model="usernameArray" placeholder="输入成员用户名,多个以逗号隔开" />
				</view>
			</view>
			<view slot="btns">
				<view class="dialog-btns">
					<view><button type="primary" @tap="closeDialog2">关闭</button></view>
					<view><button type="primary" @tap="confirm2" formType="submit" style="color:#3688FF;">确认移除成员</button></view>
				</view>
			</view>
		</uni-dialog>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import uniDialog from '@/components/im-chat/uni-dialog.vue'
	
	// #ifdef H5
	import mock from "@/common/mock.js"
	// #endif
	
	export default {
		components: {
			uniDialog
		},
		computed: {
			...mapState(['loginProvider']),
		},
		data() {
			return {
				groupId:0,
				owner:'',	// 群主的用户名
				name: '',	// 群聊名称
				desc: '',	// 群聊描述
				maxMemberCount:0,	// 群人数最大值
				show1: false,
				usernameArray:"",	// 成员用户名
				membersArray:[],	// 群组内成员
				show2: false,
				ifNoDisturb:false,	// 是否免打扰
				ifblock:false,		// 是否屏蔽
			}
		},
		onLoad(option) {
			// #ifdef APP-PLUS
			// 设置标题
			if (!option.groupId) {
				uni.showModal({
					title: '错误',
					content: '缺少群组信息',
					showCancel: false,
					cancelText: '',
					confirmText: '好的'
				});
				return;
			}
			uni.setNavigationBarTitle({
				title: option.title
			});
			
			this.groupId = option.groupId;
			this.init();
			// #endif
			
			
			// #ifdef H5
			// 在H5下模拟数据用于调试页面显示样式，这段mock可以删除
			this.membersArray = this.setMembersList(mock.groupMembersArray);
			// #endif
			
		},
		methods: {
			init:function(){
				// 获取群组信息
				this.jpushIM.getGroupInfo({"id":this.groupId}, (callback) => {
					let groupInfo = callback.data;
					this.name = groupInfo.name;
					this.desc = groupInfo.desc;
					this.maxMemberCount = groupInfo.maxMemberCount;
					this.owner = groupInfo.owner;	// 创建人
					uni.setNavigationBarTitle({
						title: groupInfo.name + "（ "+groupInfo.maxMemberCount+"人群）"
					});
					this.ifblock = groupInfo.isShieldMessage;
					this.ifNoDisturb = groupInfo.isNoDisturb;
				})
				this.jpushIM.getGroupMembers({"id":this.groupId}, (callback) => {
					if(callback.errorCode == 0){
						this.membersArray = this.setMembersList(callback.data);
					}
				})
				// this.ifblockMessage();
			},
			bindTextAreaBlur: function (e) {
				// console.log(e.detail.value)
			},
			ifblockMessage:function(){
				// 演示，查询群组是否屏蔽消息
				let param = {
					id:this.groupId
				}
				this.jpushIM.isGroupBlocked(param, (callback) => {
					this.ifblock = callback.data
				})
			},
			switch1Change: function (e) {
				let param = {
					type:'group',
					groupId:this.groupId,
					isNoDisturb:e.target.value
				}
				uni.showLoading({
					title: '',
					mask: false
				});
				this.jpushIM.setNoDisturb(param, (callback) => {
					uni.hideLoading();
					
					uni.showModal({
						title: callback.errorCode == 0?'成功':'错误',
						content: callback.errorMsg,
						showCancel: false,
						cancelText: '',
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								// console.log("点击了确定按钮")
								// if(callback.errorCode == 0){
								// 	uni.navigateBack({
								// 		delta: 1
								// 	});
								// }
							}
						}
					});
				})
			},
			switch2Change: function (e) {
				let param = {
					id:this.groupId,
					isBlock:e.target.value
				}
				uni.showLoading({
					title: '',
					mask: false
				});
				this.jpushIM.blockGroupMessage(param, (callback) => {
					uni.hideLoading();
					
					uni.showModal({
						title: callback.errorCode == 0?'成功':'错误',
						content: callback.errorMsg,
						showCancel: false,
						cancelText: '',
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								// console.log("点击了确定按钮")
								// if(callback.errorCode == 0){
								// 	uni.navigateBack({
								// 		delta: 1
								// 	});
								// }
							}
						}
					});
				})
			},
			update:function(e){
				uni.showLoading({
					title: '',
					mask: false
				});
								
				let param = {
					"id" : this.groupId,
					"newName" : this.name,
					"newDesc" : this.desc
				}
				this.jpushIM.updateGroupInfo(param, (callback) => {
					uni.hideLoading();
					
					uni.showModal({
						title: callback.errorCode == 0?'成功':'错误',
						content: callback.errorMsg,
						showCancel: false,
						cancelText: '',
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								
								// console.log("点击了确定按钮")
								if(callback.errorCode == 0){
									uni.navigateBack({
										delta: 1
									});
								}
								
							}
						}
					});
				})
			},
			quit:function(e){
				uni.showLoading({
					title: '',
					mask: false
				});
								
				let param = {
					"id" : this.groupId
				}
				this.jpushIM.exitGroup(param, (callback) => {
					uni.hideLoading();
					
					uni.showModal({
						title: callback.errorCode == 0?'成功':'错误',
						content: callback.errorMsg,
						showCancel: false,
						cancelText: '',
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								// console.log("点击了确定按钮")
								if(callback.errorCode == 0){
									uni.switchTab({
									    url: './im-list'
									});
								}
							}
						}
					});
				})
			},
			dissolve:function(e){
				
				uni.showModal({
					title: '提示',
					content: '是否确认解散群【' + this.name + '】',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '',
								mask: false
							});
							
							let param = {
								"groupId" : this.groupId
							}
							this.jpushIM.dissolveGroup(param, (callback) => {
								uni.hideLoading();
								
								uni.showModal({
									title: callback.errorCode == 0?'成功':'错误',
									content: callback.errorMsg,
									showCancel: false,
									cancelText: '',
									confirmText: '确定',
									success: res => {
										if (res.confirm) {
											// console.log("点击了确定按钮")
											if(callback.errorCode == 0){
												uni.switchTab({
												    url: './im-list'
												});
											}
										}
									}
								});
							})
						}
					},
				});
				
			},
			showDialog1: function(index) {
				this.show1 = true;
			},
			closeDialog1: function() {
				this.show1 = false;
			},
			confirm1:function(){
				// 添加群组成员调接口
				this.closeDialog1();
				
				uni.showLoading({
					title: '',
					mask: false
				});
				let params = {
					"id": this.groupId,
					"usernameArray": this.usernameArray.split(",")
				}
				// 这里看一下用户名提交的
				console.log("usernameArray传参：");
				console.log(JSON.stringify(params));
				console.log(params.usernameArray);
				console.log(typeof params.usernameArray);
				// #ifdef APP-PLUS
				this.jpushIM.addGroupMembers(params, (callback) => {
					uni.hideLoading();
					
					uni.showModal({
						title: callback.errorCode == 0?'成功':'错误',
						content: callback.errorMsg,
						showCancel: false,
						cancelText: '',
						confirmText: '确定',
						success: res => {
							if (res.confirm) {
								// console.log("点击了确定按钮")
								if(callback.errorCode == 0){
									uni.navigateBack({
										delta: 1
									});
									// uni.navigateTo({
									// 	'url': './im-chat-group?title='+this.name+'&groupId='+this.groupId
									// });
								}
							}
						}
					});
				})
				// #endif
			},
			setMembersList:function(items){
				var newItems = [];
				items.forEach((e) => {
					e.user.avatar = e.user.avatar ? e.user.avatar : "../../static/img/im/chat_icon.png";
					newItems.push(e);
				});
				return newItems;
			},
			showDialog2: function(index) {
				this.show2 = true;
			},
			closeDialog2: function() {
				this.show2 = false;
			},
			confirm2:function(){
				// 添加群组成员调接口
				this.closeDialog2();
				
				uni.showModal({
					title: '提示',
					content: '是否确认移除成员' + this.usernameArray,
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '',
								mask: false
							});
							
							let params = {
								"id": this.groupId,
								"usernameArray": this.usernameArray.split(",")
							}
							this.jpushIM.removeGroupMembers(params, (callback) => {
								uni.hideLoading();
								
								uni.showModal({
									title: callback.errorCode == 0?'成功':'错误',
									content: callback.errorMsg,
									showCancel: false,
									cancelText: '',
									confirmText: '确定',
									success: res => {
										if (res.confirm) {
											// console.log("点击了确定按钮")
											this.init();
										}
									}
								});
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
						
						
					}
				});
			},
			intoUserInfo:function(index){
				let item = this.membersArray[index];
				uni.navigateTo({
					url: './im-user?title=群成员&fromUser=' + item.user.username
				});
			}
		}
	}
</script>

<style scoped>
	.im-chat-group-info .members{
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 20rpx 1%;
	}
	.im-chat-group-info .members .row{
		width: 25%;
		height: 160rpx;
		margin-top: 15rpx;
	}
	.im-chat-group-info .members .row img,
	.im-chat-group-info .members .row image{
		width: 100%;
		height: 100rpx;
	}
	.im-chat-group-info .members .row .group-nickname{
		height: 35rpx;
		line-height: 35rpx;
		overflow: hidden;
	}
	.im-chat-group-info .uni-row {
		position: relative;
		padding: 24rpx 30rpx;
		display:flex;
		flex-direction:row;
		align-items:center;
	}
	.im-chat-group-info .uni-row:after {
		position: absolute;
		z-index: 3;
		right: 0;
		bottom: 0;
		left: 30rpx;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #e5e5e5
	}
	
	.im-chat-group-info .uni-row:last-child:after{
		height: 0;
	}
	
	.im-chat-group-info .uni-row .tit {
		width: 250rpx;
	}
	.im-chat-group-info .uni-row .info-text{
		-webkit-flex: 1;
		flex: 1;
		color: #969696;
	}
	.im-chat-group-info .uni-row textarea{
		padding: 15rpx 25rpx;
		width: 90%;
	}
	.im-chat-group-info .btns{
		-webkit-justify-content: center;
		justify-content: center; 
		margin-top: 30rpx;
		padding: 25rpx 0;
	}
	
	/* 模态对话框 */
	.dialog-btns {
		display: flex;
		width: 100%;
		padding: 10px 0;
		flex-wrap: nowrap;
	}
	
	.dialog-btns view {
		width: 100%;
		border-right: 1px solid #F5F6F8;
	}
	
	.dialog-btns view:last-child {
		border: 0;
	}
	
	.dialog-btns button {
		width: 100%;
		padding: 0;
		text-align: center;
		background: none;
		border: none;
		box-shadow: none;
		height: 25px;
		font-size: 14px;
		color: #888888;
		line-height: 25px;
		border-radius: 0;
	}
	
	.dialog-btns button:after {
		width: 0;
		height: 0;
		border: 0;
	}
	
	.dialog-btns .button-hover {
		background: none;
		color: #3688FF;
	}
	
	.dialog-content1 {
		padding: 15rpx;
		background: #F8F8F8;
	}
	
	.dialog-content1 .uni-input {
		margin-bottom: 15rpx;
	}
	
	.dialog-content1 .uni-textarea {
		padding: 15rpx;
		box-sizing: border-box;
	}
</style>
